function Btn(){
    this.prev =this.$('.prev') 
    this.next =this.$('.next') 
    this.timeBar = this.$('.timeBar')
    this.times = 0
    this.li = this.gets('.timeBar li')
    this.init()
}
Btn.prototype = {
    init:function(){
        this.bindEvent()
    },
    bindEvent:function(){
        //能动就行了  模拟滑动屏幕  要求别太高
        this.prev.addEventListener('click',function(e){
            this.times +=1;
            this.timeBar.style.cssText = "margin-left : -"+3.5*this.times+"rem; transition : 1s linear"
            // console.log(this.times)
        }.bind(this))
        this.next.addEventListener('click',function(e){
            this.times -=1;
            this.timeBar.style.cssText = "margin-left : "+3.5*this.times+"rem; transition : 1s linear"
            // console.log(this.times)
        }.bind(this))
        this.li.forEach(function(l,idx){
            l.addEventListener('click',function(e){
                // this.$('.active') && this.$('.active').classList.remove('active')
                l.classList.add('.active')
            }.bind(this))
        })
    }
}
Btn.prototype.$ = function(el){
    return document.querySelector(el)
}

Btn.prototype.gets = function(el){
    return [...document.querySelectorAll(el)]
}


new Btn()